<template>
    <div class="c-main c_edit">
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editorRef"
            :defaultConfig="toolbarConfig"
            :mode="mode" />
        <Editor
            class="editor"
            v-model="publishform.content"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="handleCreated" />
        <div class="c-tip">
            <a href="https://www.wangeditor.com/" target="_blank">wangeditor开发文档</a>
        </div>
    </div>
</template>

<script lang="ts" setup>
import '@wangeditor/editor/dist/css/style.css';
import { ref, shallowRef, onBeforeUnmount, reactive } from 'vue';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';

let mode = ref('default');
const publishform = reactive({
    content: `<P>该富文本组件为《wangeditor》</P><p>喜欢并且点了star</p>`,
});
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();
const toolbarConfig = {
    excludeKeys: ['uploadVideo'],
};
const editorConfig: any = { placeholder: '请输入内容...', MENU_CONF: {} };
editorConfig.MENU_CONF['uploadImage'] = {
    // 其他配置...

    // 小于该值就插入 base64 格式（而不上传），默认为 0
    base64LimitSize: 100 * 1024 * 1024, // 100M
};

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value;
    if (editor == null) return;
    editor.destroy();
});

const handleCreated = (editor: any) => {
    // 记录 editor 实例，重要！
    editorRef.value = editor;
};
</script>

<style lang="scss" scoped>
.c_edit {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.editor {
    flex: 1;
    flex-shrink: 0;
    overflow-y: hidden;
}
.c-tip {
    line-height: 40px;
}
</style>
